<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>项目管理</el-breadcrumb-item>
        <el-breadcrumb-item>所有归档项目列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="projectQuery" inline>
        <el-form-item label="项目名称">
          <el-input v-model="projectQuery.projectName"/>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="startTimes"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="endTimes"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="loadProjects" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button type="primary">新增</el-button>
        <el-button @click="toEdits" type="primary">编辑</el-button>
        <el-button @click="toDeletes" type="primary">删除</el-button>
        <el-button @click="toPigeonholes" type="primary">归档</el-button>
        <el-button  @click="toPublishs" type="primary">发布</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="projects"  ref="projectTable" @selection-change="handleSelectionChange" border stripe>
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="projectId" label="#">
          <template #default="scope">
            <el-link
                type="success"
                @click="showProjectDetails(scope.row.projectId)"
            >
              {{ scope.row.projectId }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称"/>
        <el-table-column prop="user.username" label="管理者"/>
        <el-table-column label="任务数量" prop="taskCount"/>
        <el-table-column prop="projectStatus" label="项目状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.projectStatus == 1">草稿</el-tag>
            <el-tag type="primary" v-else-if="scope.row.projectStatus == 2">发布</el-tag>
            <el-tag type="warning" v-else-if="scope.row.projectStatus == 3">归档</el-tag>
            <el-tag type="danger" v-else-if="scope.row.projectStatus == 4">暂停</el-tag>
            <el-tag type="info" v-else-if="scope.row.projectStatus == 5">意外</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间"/>
        <el-table-column prop="endTime" label="结束时间"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button-group>
              <template v-if="scope.row.userId == curPage">
                <el-button size="small" type="primary" @click="toEdit(scope.row.projectId)">编辑</el-button>
                <el-button size="small" type="info" @click="toDraft(scope.row.projectId)">恢复</el-button>
                <el-button size="small" type="danger" @click="toDelete(scope.row.projectId)">删除</el-button>
              </template>
              <el-button size="small" @click="showTaskList(scope.row)" type="primary">任务</el-button>
              <el-button size="small" type="primary">日历</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>
  <!-- 新增项目的弹窗 -->
  <el-dialog v-model="projectAddWinDialogVisible"
             title="新增项目"
             width="50%"
  >
    <template #default>
      <el-form :model="newProject">
        <el-form-item label="巴拉巴拉">
          <el-input v-model="newProject.projectName"/>
        </el-form-item>
        <el-form-item label="项目描述">
          <!--                    <el-input type="textarea" v-model="newProject.projectDesc"/>-->
          <!-- 富文本编辑器的结构 -->
          <div style="border: 1px solid #ccc">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
            />
          </div>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addProjectSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 项目详情弹窗 -->
  <el-dialog
      title="项目详情"
      v-model="projectVisible"
      width="500">
    <el-form :model="projectDetails" label-width="120px">
      <el-form-item label="项目编号">
        <el-input v-model="projectDetails.projectId" readonly></el-input>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="projectDetails.projectName" readonly></el-input>
      </el-form-item>
      <el-form-item label="项目描述">
        <el-input type="textarea" v-model="projectDetails.projectDesc" readonly></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker v-model="projectDetails.startTime" type="datetime" readonly></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="projectDetails.endTime" type="datetime" readonly></el-date-picker>
      </el-form-item>
      <el-form-item label="项目状态">
        <el-input type="text" v-model="projectDetails.projectStatus" readonly/>
      </el-form-item>
      <el-form-item label="发布者编号">
        <el-input v-model="projectDetails.userId" readonly></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" >
    <el-button @click="projectVisible = false">关闭</el-button>
  </span>
  </el-dialog>

  <!-- 编辑弹窗 -->
  <el-dialog
      title="编辑项目"
      v-model="dialogVisible"
      width="500">
    <el-form :model="editProject"  >
      <el-form-item label="项目编号" prop="project_id">
        <el-input v-model="editProject.projectId" readonly></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="project_name">
        <el-input v-model="editProject.projectName" />
      </el-form-item>
      <el-form-item label="项目描述" prop="project_desc">
        <el-input type="textarea" v-model="editProject.projectDesc" />
      </el-form-item>
      <el-form-item label="开始时间" prop="start_time">
        <el-date-picker v-model="editProject.startTime" type="datetime" />
      </el-form-item>
      <el-form-item label="结束时间" prop="end_time">
        <el-date-picker v-model="editProject.endTime" type="datetime" />
      </el-form-item>
      <el-form-item label="项目状态" prop="project_status">
        <el-select v-model="editProject.projectStatus">
          <el-option label="草稿状态" value="1"></el-option>
          <el-option label="发布状态" value="2"></el-option>
          <el-option label="归档状态" value="3"></el-option>
          <el-option label="暂停状态" value="4"></el-option>
          <el-option label="意外状态" value="5"></el-option>
          <el-option label="删除状态" value="99"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布者编号" prop="user_id">
        <el-input v-model="editProject.userId" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="">确 定</el-button>
      </span>
  </el-dialog>




</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import projectRequest from "@/api/project.js";
import {useRouter} from "vue-router";
import taskRequest from "@/api/task.js";
// 封装搜索数据的对象
let projectQuery = ref({projectStatus: 0})
// 封装两个时间范围
let startTimes = ref([]);
let endTimes = ref([]);
// 查询的项目列表
let projects = ref([]);
// 总条数，默认0
let total = ref(0);
// 当前页码，默认1
let curPage = ref(1);
// 当前登录用户的编号
let currUserId = ref();
let router = useRouter();
// 新增项目的弹窗标记
let projectAddWinDialogVisible = ref(false);
// 保存新增项的表单的数据
let newProject = ref({});

// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML ，如果我们修改了内容，这里会跟着变化
const valueHtml = ref('<p>hello</p>')
// 这里的projectTable必须和表格的ref属性一致，projectTable表示表格对象本身
let projectTable = ref(null);
// 工具栏配置
const toolbarConfig = {
}
// 主动配置工具栏
// toolbarConfig.toolbarKeys = [
//     // 菜单 key
//     'headerSelect',
//     // 分割线
//     '|',
//     // 菜单 key
//     'bold', 'italic',
//     // 菜单组，包含多个菜单
//     {
//         key: 'group-more-style', // 必填，要以 group 开头
//         title: '更多样式', // 必填
//         iconSvg: '<svg>....</svg>', // 可选
//         menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
//     },
//     // 继续配置其他菜单...
// ]
// 编辑器配置
const editorConfig = { placeholder: '请输入内容...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
// 工具栏编辑按钮事件
function toEdits(){
  // 获取当前选择的行
  let rows = projectTable.getSelectionRows();

}
// 工具栏删除按钮事件
/*function toDeletes(){
  // 获取当前选择的行
  let rows = projectTable.getSelectionRows();
  // 判断....
  let noDeletePermissionProjectName = [];
  for(let i = 0; i < rows.length;i++){
    if(rows[i].userId != currUserId.value){
      noDeletePermissionProjectName.push(rows[i].projectName);
    }
  }
  if(noDeletePermissionProjectName.length > 0){
    let nameStr = noDeletePermissionProjectName.join(",")
    //提示
    return;
  }
  // 进行批量删除
}*/
const rows = ref([]);
const handleSelectionChange = (selectedRows) =>{
  rows.value = selectedRows;//更新选中的项目
  //console.log(rows.value)
}
//批量删除操作
function toDeletes() {
  // 获取当前选择的行
  let selectedRows = rows.value; // 正确访问 `rows` 的值
  let noDeletePermissionProjectName = []; // 存储没有删除权限的项目名称
  let projectIds = []; // 存储可以删除的项目 ID

  console.log('当前用户 ID:', currUserId.value); // 打印当前用户 ID
  console.log('选中的行数据:', selectedRows); // 打印选中的行数据

  // 遍历选中的行
  for (let i = 0; i < selectedRows.length; i++) {
    const row = selectedRows[i];
    //console.log('处理行:', row); // 打印当前处理的行数据
    //console.log('行用户id',row.user.userId)
    if (row.user.userId == currUserId.value) {
      // 用户有权限删除
      projectIds.push(row.projectId);
    } else {
      // 用户没有权限删除
      noDeletePermissionProjectName.push(row.projectName);
    }
  }
  // 如果有没有删除权限的项目，显示提示信息
  if (noDeletePermissionProjectName.length > 0) {
    let nameStr = noDeletePermissionProjectName.join(",");
    alert(`以下项目没有删除权限: ${nameStr}`);
    return; // 退出函数
  }

  // 如果所有选中的项目都可以删除，执行批量删除
  if (projectIds.length > 0) {
    projectRequest.batchDelete(projectIds, function(error) {
      if (error) {
        console.error('批量删除失败:', error);
      } else {
        //projectRequest.batchDelete(projectIds);
        console.log('批量删除成功');
        // 刷新项目表格
        loadProjects();
      }
    });
  } else {
    alert('没有选中任何可以删除的项目');
  }
}

//批量归档操作
function toPigeonholes() {
  // 获取当前选择的行
  let selectedRows = rows.value; // 正确访问 `rows` 的值
  let noArchivePermissionProjectName = []; // 存储没有归档权限的项目名称
  let projectIds = []; // 存储可以归档的项目 ID

  //console.log('当前用户 ID:', currUserId.value); // 打印当前用户 ID
  //console.log('选中的行数据:', selectedRows); // 打印选中的行数据

  // 遍历选中的行
  for (let i = 0; i < selectedRows.length; i++) {
    const row = selectedRows[i];
    if (row.user.userId == currUserId.value) {
      // 用户有权限归档
      projectIds.push(row.projectId);
    } else {
      // 用户没有权限归档
      noArchivePermissionProjectName.push(row.projectName);
    }
  }

  // 如果有没有归档权限的项目，显示提示信息
  if (noArchivePermissionProjectName.length > 0) {
    let nameStr = noArchivePermissionProjectName.join(",");
    alert(`以下项目没有归档权限: ${nameStr}`);
    return; // 退出函数
  }

  // 如果所有选中的项目都可以归档，执行批量归档
  if (projectIds.length > 0) {
    projectRequest.batchPigeonhole(projectIds, function(error) {
      if (error) {
        console.error('批量归档失败:', error);
      } else {
        console.log('批量归档成功');
        // 刷新项目表格
        loadProjects();
      }
    });
  } else {
    alert('没有选中任何可以归档的项目');
  }
}
//批量发布操作
function toPublishs() {
  // 获取当前选择的行
  let selectedRows = rows.value; // 正确访问 `rows` 的值
  let noPublishPermissionProjectName = []; // 存储没有发布权限的项目名称
  let projectIds = []; // 存储可以发布的项目 ID

  console.log('当前用户 ID:', currUserId.value); // 打印当前用户 ID
  console.log('选中的行数据:', selectedRows); // 打印选中的行数据

  // 遍历选中的行
  for (let i = 0; i < selectedRows.length; i++) {
    const row = selectedRows[i];
    if (row.user.userId == currUserId.value) {
      // 用户有权限发布
      projectIds.push(row.projectId);
    } else {
      // 用户没有权限发布
      noPublishPermissionProjectName.push(row.projectName);
    }
  }

  // 如果有没有发布权限的项目，显示提示信息
  if (noPublishPermissionProjectName.length > 0) {
    let nameStr = noPublishPermissionProjectName.join(",");
    alert(`以下项目没有发布权限: ${nameStr}`);
    return; // 退出函数
  }

  // 如果所有选中的项目都可以发布，执行批量发布
  if (projectIds.length > 0) {
    projectRequest.batchPublish(projectIds, function(error) {
      if (error) {
        console.error('批量发布失败:', error);
      } else {
        console.log('批量发布成功');
        // 刷新项目表格
        loadProjects();
      }
    });
  } else {
    alert('没有选中任何可以发布的项目');
  }
}




//默认项目详情弹窗不显示
const projectVisible = ref(false);
//封装项目详情用户的数据
let projectDetails = ref({});
//点击显示项目详情
function showProjectDetails(projectId){
  projectVisible.value = true;
  projectRequest.loadProjectById(projectId,res=>{
    projectDetails.value = res.data;
  })
}


//默认编辑弹窗不显示
const dialogVisible = ref(false);
//封装编辑用户的数据
let editProject = ref({});
//绑定编辑事件
function toEdit(projectId){
  //点击显示弹窗
  dialogVisible.value = true;
  // 通过id加载project
  projectRequest.loadProjectById(projectId,res=>{
    // 这里的res就是我们后端返回的qdResult
    editProject.value = res.data;
  })
}
//恢复操作
function toDraft(projectId){
  // 提示用户是否确认归档
  if (confirm('确定要恢复这个项目吗？')) {
    // 用户点击确认，执行归档操作
    projectRequest.draftById(projectId, (error) => {
      if (error) {
        console.error('恢复项目失败:', error);
        alert('恢复项目失败，请稍后重试。'); // 显示失败提示
      } else {
        alert('项目成功恢复'); // 显示成功提示
        loadProjects(); // 重新加载项目列表
      }
    });
  } else {
    // 用户点击取消，什么都不做
    console.log('用户取消了恢复操作');
  }
}
//删除操作
function toDelete(projectId){
  // 提示用户是否确认删除
  if (confirm('确定要删除这个项目吗？')) {
    // 用户点击确认，执行删除操作
    projectRequest.deleteProjectById(projectId, (error) => {
      if (error) {
        console.error('删除项目失败:', error);
        alert('删除项目失败，请稍后重试。'); // 显示失败提示
      } else {
        alert('项目成功删除'); // 显示成功提示
        loadProjects(); // 重新加载项目列表
      }
    });
  } else {
    // 用户点击取消，什么都不做
    console.log('用户取消了删除操作');
  }
}
/**
 * 新增项目的提交按钮事件
 */
function addProjectSubmit(){
  console.log(valueHtml.value)
}
/**
 * 加载项目列表
 */
function loadProjects() {
  //处理查询条件，处理时间范围
  if (startTimes.value[0]) {
    projectQuery.value.startTimeBegin = startTimes.value[0];
  }
  if (startTimes.value[1]) {
    projectQuery.value.startTimeEnd = startTimes.value[1];
  }
  if (endTimes.value[0]) {
    projectQuery.value.endTimeBegin = endTimes.value[0];
  }
  if (endTimes.value[1]) {
    projectQuery.value.endTimeBegin = startTimes.value[1];
  }
  projectQuery.value.projectStatus = 3;
  console.log(projectQuery.value)
  // 调用API来查询项目列表
  projectRequest.loadProjects(projectQuery.value, curPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    total.value = res.data.total;
    // 将查询的列表赋值给projects
    projects.value = res.data.list;
    projects.value.forEach(project=>taskCount(project));
  })
}
//获取每个项目的任务数量
const tasks = ref();
async function taskCount(project) {
  taskRequest.taskByProjectId(project.projectId, res => {
    tasks.value = res.code;
    project.taskCount = res.code;
  });
}

// 分页事件
function changePage(value) {
  curPage.value = value;
  loadProjects();
}
/**
 * 进入任务列表
 * @param project
 */
function showTaskList(project){
  router.push("/home/tasks/" + project.projectId)
}
onMounted(() => {
  loadProjects();
  // 从localStorage中获取用户编号
  curPage.value = localStorage.getItem("userId");
  currUserId.value = localStorage.getItem("userId");
  if (curPage.value == undefined || curPage.value == '') {
    // 进入登录页面
    router.push("/");
  }
})
</script>

<style scoped>

</style>